<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script src="js/jweixin-1.6.0.js.js" type="text/javascript" charset="utf-8"></script>
		<script charset="utf-8"
			src="https://map.qq.com/api/gljs?v=1.exp&key=HJLBZ-DQKL5-XBFI7-QEFU4-73SRS-G7FK5&libraries=geometry">
		</script>
		<title>地图导览</title>
		<script src="js/monkey.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}

			#container {
				width: 100%;
				height: 100%;
			}

			.rotate-circle {
				/* padding: 80px 300px 7px 20px !important; */
				padding-top: 4.5rem;
				display: none;
			}

			.logo-text {
				display: none;
			}

			.tmap-scale-control {
				display: none;
			}

			.tmap-zoom-control {
				display: none;
			}

			.topOpenBox {
				width: 90%;
				height: auto;
				position: absolute;
				bottom: 5%;
				left: 5%;
				transition: .2s;
				z-index: 9999;
				overflow: hidden;
				background-color: #fff;
				border-radius: 10px;
				border: 1px solid #f5f5f5;
				color: #333;
			}

			.openBoxTop {
				padding: 12px 20px;
			}

			.openBoxBottom {
				border-top: 1px solid #f5f5f5;
				display: flex;
				justify-content: space-around;
				padding: .5rem 0;
			}

			.headTitle {
				font-size: 1rem;
			}

			.touristDetail {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}

			.touristDetailRight {
				width: 16rem;
			}

			.touristDetailRight p:nth-child(1) {
				margin: 5px 0;
				font-size: .8rem;
			}

			.touristDetailRight p:nth-child(2) {
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: .8rem;
			}

			.audioBox {
				width: 50px;
				height: auto;
				margin-left: .5rem;
			}

			.audioPlay {
				background: url(https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/play.png) no-repeat top center;
				background-size: 80%;
			}

			.audioParse {
				background: url(https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/pause.png) no-repeat top center;
				background-size: 80%;
			}

			.topTitle {
				font-size: 18px;
				padding: 2px 5px 10px;
				color: #333;
				border-bottom: 1px solid #f5f5f5;
				margin-bottom: 10px;
			}

			.topMain {
				display: flex;
				padding: 0 5px 5px;
			}
			
			.infowindow{
				width: 100px;
				height: auto;
				overflow: hidden;
			}
		</style>

	<body>
		<div id="container"></div>
		<!-- 底部弹出框 -->
		<div class="topOpenBox">
<!-- 			<div class="openBoxTop">
				<div class="headTitle">龙门桥</div>
				<div class="touristDetail">
					<div class="touristDetailRight">
						<p>距你1089公里</p>
						<p>龙门桥，又称龙门石拱桥，</p>
					</div>
					<div class="audioBox audioPlay" onclick="clickToPlay()">
						<audio src="static/1111.mp3" id="audio">
							当前浏览器不支持audio
						</audio>
					</div>
				</div>
			</div>
			<div class="openBoxBottom">
				<div class="" style="display: flex;align-items: center;">
					<static src="static/navto.png" style="width: 22px;margin-right: 5px;">
					<span>详情</span>
				</div>
			</div> -->
		</div>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript">
			// 地图信息 
			//获取当前地址坐标
			const userLocation = localStorage.getItem('userLocation').split(',');
			var center = new TMap.LatLng(userLocation[1], userLocation[0]);
			// var mapCenter = new TMap.LatLng(26.042207, 114.251352);
			var mapCenter = new TMap.LatLng(22.852354 ,106.727307);
			//初始化地图
			var map = new TMap.Map("container", {
				zoom: 17, //设置地图缩放级别
				center: mapCenter //设置地图中心点坐标
			});
			var lineList = [{
					id: 1,
					img: '../../hybrid/html/image/dtpbMap.jpg',
				},
				{
					id: 2,
					img: '../../hybrid/html/image/dtpbMap.jpg',
				},
				{
					id: 3,
					img: '../../hybrid/html/image/dtpbMap.jpg',
				},
				{
					id: 4,
					img: '../../hybrid/html/image/dtpbMap.jpg',
				},
			]; //路线
			//手绘地图放置信息 左上角坐标 右下角坐标
			// var imageSW = new TMap.LatLng(26.041529, 114.250750);
			// var imageNE = new TMap.LatLng(26.042982, 114.251855);
			var imageSW = new TMap.LatLng(22.848854 ,106.719951);
			var imageNE = new TMap.LatLng(22.856898 ,106.735347);
			var imageLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
			//26.042815 114.251426  26.042600 114.251464  26.042560 114.251360 26.042543 114.251363  26.042486 114.251294
			var touristList = [];
			// 获取要显示路线的id 调取接口获取数据
			$(function() {
				const mapLineId = JSON.parse(localStorage.getItem('mapLine'));
				method.PostApiUrl('/API/GuideRoute/GetGuideRouteInfos', {
					Id: mapLineId,
				}, function(data) {
					console.log(data);
					data.Data.forEach((item, index) => {
						let markers = {
							id: 'marker' + `${index}`,
							styleId: 'marker',
							position: new TMap.LatLng(Number(item.Lat), Number(item.Lng)),
							properties: {
								title: item.Title,
								img: item.IconImg,
								introduction: item.Abstract,
								detailUrl: item.ArticleId,
								audio: item.Audio
							},
							content: item.Title
						};
						touristList.push(markers);
					});
					// 放置手绘地图
					lineList.forEach((item) => {
						if (item.id == mapLineId) {
							var imageGroundLayer = new TMap.ImageGroundLayer({
								bounds: imageLatLngBounds,
								src: item.img,
								map: map
							});
							// 渲染标点
							showTypeOfMarker(touristList, 'https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/iconJingdian.png');
						};
					});
				})
			})

			var marker = null;
			// 封装一个点击显示marker的函数
			function showTypeOfMarker(arr, icon) {
				//初始化marker
				marker = new TMap.MultiMarker({
					id: 'marker-layer', //图层id
					map: map,
					styles: { //点标注的相关样式
						marker: new TMap.MarkerStyle({
							width: 45,
							height: 45,
							anchor: {
								x: 32,
								y: 16
							},
							src: icon,
							color: '#333', // 标注点文本颜色
							size: 16, // 标注点文本文字大小
							direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
							strokeColor: '#fff', // 标注点文本描边颜色
							strokeWidth: 2, // 标注点文本描边宽度
							offset: {
								x: 0,
								y: 2
							}, // 标注点文本文字基于direction方位的偏移属性
						}),
					},
					geometries: arr //点标注数据数组
				});
				// 设置自适应显示
				// showMarker(arr);
				//监听marker点击事件
				marker.on("click", eventClick);
			};
			
			var infoWindow;
			function closeInfoWindow() {
			  infoWindow.close();
			};
			function openInfoWindow() {
			  infoWindow.open();
			};
			function eventClick(evt) {
				if(infoWindow!=null){
					closeInfoWindow();
				}
				console.log('evt',evt)
				$('.topOpenBox').addClass('beChoiceOpen');
				let lat = evt.geometry.position.lat;
				let lng = evt.geometry.position.lng;			
				// 重新设置中心坐标
				map.setCenter(new TMap.LatLng(lat, lng));
				let localCenter = new TMap.LatLng(lat, lng);
				let addressName = evt.geometry.properties.title;
				// 放置信息窗口
				infoWindow = new TMap.InfoWindow({
				    map: map,
				    position: localCenter,
				    content: `<div class='infowindow' onclick='toDetail(${evt.geometry.properties.detailUrl})'><img src=${evt.geometry.properties.img}></div>`
				});
				
				computedDistance(localCenter, center);
				renderBottomBox(evt,lat,lng);
			};
			function renderBottomBox(evt,lat,lng){
				// 有些地址没有详情 注意
				if (evt.geometry.properties.introduction == null || evt.geometry.properties.introduction == '') {
					evt.geometry.properties.introduction = '暂无简介'
				};
				// 没有图片是默认图片
				if (evt.geometry.properties.img == null || evt.geometry.properties.img == '') {
					evt.geometry.properties.img = 'https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/nopic.png';
				}
				let html = '';
				html = `
					<div class="openBoxTop">
						<div class="headTitle">${evt.geometry.properties.title}</div>
						<div class="touristDetail">
							<div class="touristDetailRight" onclick="toDetail(${evt.geometry.properties.detailUrl})">
								<p>距你${distance}</p>
								<p>${evt.geometry.properties.introduction}</p>
							</div>
				`
				if (evt.geometry.properties.audio == null || evt.geometry.properties.audio == '') {
					html += `
						</div>
					</div>
					<div class="openBoxBottom">
						<div class="" style="display: flex;align-items: center;" onclick="openMap(${lat},${lng})">
							<img src="https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/navto.png" style="width: 22px;margin-right: 5px;">
							<span>前往</span>
						</div>
					</div>
					`
				} else {
					html += `
								<div class="audioBox audioPlay" onclick="clickToPlay()">
									<audio src=${evt.geometry.properties.audio} id="audio">
										当前浏览器不支持audio
									</audio>
								</div>
							</div>
						</div>
						<div class="openBoxBottom">
							<div class="" style="display: flex;align-items: center;" onclick="openMap(${lat},${lng})">
								<img src="https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/navto.png" style="width: 22px;margin-right: 5px;">
								<span>前往</span>
							</div>
						</div>
					`
				}
				$('.topOpenBox').html(html);
			}
			
			//封装计算距离函数
			var distance = 0;
			function computedDistance(userLocation, destination) {
				distance = TMap.geometry.computeDistance([userLocation, destination]);
				if (distance >= 1000) {
					distance = (distance / 1000).toFixed(2) + '公里';
				} else {
					distance = distance.toFixed(2) + '米';
				}
				localStorage.setItem('distance', distance)
			}

			//获取点击坐标
			map.on("click", function(evt) {
				$('#touristLine').show();
				if ($('.showAllMenu').hasClass('showAllMenuCheck')) {
					$('.showAllMenu').removeClass('showAllMenuCheck');
				};
				var lat = evt.latLng.getLat().toFixed(6);
				var lng = evt.latLng.getLng().toFixed(6);
				console.log(lat, lng)
				// 点击地图移除头部框
				$('.topOpenBox').removeClass('beChoiceOpen');
				// 重新设置中心坐标
				// map.setCenter(new TMap.LatLng(lat, lng)); 
			});

			//前往地图
			function openMap(lat, lon) {
				uni.webView.getEnv(function(res) {
					console.log('当前环境：' + JSON.stringify(res));
				});
				// 获取目的地的坐标
				uni.webView.navigateTo({
					url: `/pages/detail/map?lat=${lat}&lon=${lon}`
				})
			};
			// 前往详情页
			function toDetail (e){
				uni.webView.navigateTo({
					url: `/pages/detail/mapTourist?id=${e}`
				})
			}

			//点击播放
			function clickToPlay() {
				var audio = document.getElementById('audio');
				if ($('.audioBox').hasClass('audioPlay')) {
					audio.play(); // 这个就是播放  
					$('.audioBox').removeClass('audioPlay');
					$('.audioBox').addClass('audioParse');
					return;
				};
				if ($('.audioBox').hasClass('audioParse')) {
					audio.pause()
					$('.audioBox').removeClass('audioParse');
					$('.audioBox').addClass('audioPlay')
					return;
				}
			}
		</script>
	</body>
</html>
